<template>
  <div class="h100p pt84 borderbox pb44">

    <div class="fix_top bgfff pt15 disflex jscen align-cen pb15 fs12 ca8">
      <div class="textc pr10" @click="editAdd('text')">
        <img src="https://one-stand.oss-cn-shanghai.aliyuncs.com/yimai_photos/crm/editor_text.png" alt="" class="w30 h30 mb5" />
        <span class="disblock">文字</span>
      </div>
      <div class="textc pr10" @click="editAdd('img')">
        <img src="https://one-stand.oss-cn-shanghai.aliyuncs.com/yimai_photos/crm/editor_img.png" alt="" class="w30 h30 mb5" />
        <span class="disblock">图片</span>
      </div>
      <div class="textc pr10" @click="editAdd('banner')" v-if="isBanner">
        <img src="https://one-stand.oss-cn-shanghai.aliyuncs.com/yimai_photos/crm/editor_banner.png" alt="" class="w30 h30 mb5" />
        <span class="disblock">轮播</span>
      </div>
      <div class="textc pr10" @click="editAdd('split')">
        <img src="https://one-stand.oss-cn-shanghai.aliyuncs.com/yimai_photos/crm/editor_split.png" alt="" class="w30 h30 mb5" />
        <span class="disblock">分割</span>
      </div>
    </div>


    <scroll-view scroll-y="true"><!--class="posre"-->
      <div v-for="(v,k) in innerHtmls" :key="k">
        <!--class="posab left0 w100p trans2" :style="{top:v.top + 'px'}"-->
        <!--文本框-->
        <div class="edit_text" v-if="v.type == 'text'">
                    <textarea name=""
                              class="bgfff pt15 pl15 pr15 pb15 fs14 ca8 borderbox h140 w100p"
                              placeholder="请输入文本内容"
                              v-model="v.vmodel"></textarea>
          <Edit_operator @edit_tap="edit_tap" :index="k" :isBanner="isBanner"></Edit_operator>
        </div>

        <!--img-->
        <div class="edit_img" v-if="v.type == 'img'">
          <div @click="uploadpic('img',k)">
            <div class="w100p h212 bgfff textc pt30" v-if="!v.vmodel">
              <img src="https://one-stand.oss-cn-shanghai.aliyuncs.com/yimai_photos/crm/VR.png" alt="" class="w100 h100 mb5" />
              <p class="fs14 ca8">点击添加图片</p>
            </div>
            <img :src="v.vmodel" alt="" mode="widthFix" v-else class="w100p h212">
          </div>
          <Edit_operator @edit_tap="edit_tap" :index="k" :isBanner="isBanner"></Edit_operator>
        </div>

        <!--banner-->
        <div class="edit_banner" v-if="v.type == 'banner'">

          <div class="edit_banner w100p trans2" v-if="v.vmodel.length > 0" style="height: 212px;">
            <swiper class="swiper-inner"
                    :indicator-dots="false"
                    :circular="true"
                    :current="v.cur"
                    @change="swiperChange(this,$event,k)">
              <block v-for="(item,index) in v.vmodel" :index="index" :key="key">
                <swiper-item>
                  <img class="banner-img" :src="item" mode="widthFix"/>
                  <div class="tags">
                                        <span class="w30 h30 del disflex align-cen jscen mb10" @click="delBanner(k,index)">
                                            <img src="https://one-stand.oss-cn-shanghai.aliyuncs.com/yimai_photos/crm/del.png" alt="" class="w17 h17" />
                                        </span>
                    <span class="posre w30 h30 add disblock" @click="uploadpic('banner',k,index)"></span>
                  </div>
                </swiper-item>
              </block>
            </swiper>
            <!--重置小圆点的样式  -->
            <view class="dots">
              <block v-for="(item,index) in v.vmodel" :index="index" :key="key">
                <view class="dot" :class="{'active':  index == v.cur}"></view>
              </block>
            </view>
            <!--重置小圆点的样式 end -->
          </div>

          <div class="w100p h212 bgfff textc pt30" @click="uploadpic('banner',k)" v-else>
            <div>
              <img src="https://one-stand.oss-cn-shanghai.aliyuncs.com/yimai_photos/crm/VR.png" alt="" class="w100 h100 mb5" />
              <p class="fs14 ca8">点击添加轮播图片</p>
            </div>
          </div>

          <Edit_operator @edit_tap="edit_tap" :index="k" :isBanner="isBanner"></Edit_operator>
        </div>

        <!--split-->
        <div class="edit_split" v-if="v.type == 'split'">
          <div class="pt15 pb15 bgfff">
            <span class="w100p h1 bgf5f6 disblock"></span>
          </div>
          <Edit_operator @edit_tap="edit_tap" :index="k" :isBanner="isBanner"></Edit_operator>
        </div>
      </div>

    </scroll-view>



    <canvas style="width: 500px;height: 500px;position: fixed;bottom: -4000px;z-index: -100"
            canvas-id="Canvas"></canvas>

    <BottomButtonSmall :text="'保存'" :url="'confirm'" @btn_tap="btn_tap"></BottomButtonSmall>

  </div>
</template>

<script>
  import BottomButtonSmall from '@/components/bottom_button_small' //
  import Edit_operator from '@/components/edit_operator' //
  import StaticResources from '@/components/StaticResources';

  import util from '../../utils/index'
  import WXAJAX from '@/utils/request'


  export default {
    name: '',
    components: {BottomButtonSmall, Edit_operator, StaticResources},
    data() {
      return {
        text: '',
        innerHtmls: [],
        edit_height: {
          text: 205,
          img: 307,
          banner: 307,
          split: 96,

        },
        scroll_view_height: 0,
        type : '' ,
        title : {
          'prod' : '产品介绍' ,
          'companyIntroduce' : '企业介绍' ,
          'goodsIntroduce' : '产品介绍',
          'article' : '文章详情'
        },
        isBanner : false ,//是否可以添加轮播图
        websiteId:0 ,
        imgBackUrl: wx.getStorageSync('ossUrl'),
      }
    },
    mounted() {
      this.type = this.$root.$mp.query.type || '' ;
      this.websiteId = wx.getStorageSync('websiteId') || 0 ;
      wx.setNavigationBarTitle({
        title: this.title[this.type]
      });
      this.isBanner = false ;

      if(!wx.getStorageSync('editOperator')){
        this.text = '' ;
        this.innerHtmls = [] ;
      }
    },
    methods: {
      btn_tap() {
        let v = this ,
          result = [] ;
        v.innerHtmls.forEach(function (i, k) {
          switch (i.type) {
            case 'text' :
              result += '<p \n' +
                'class="bgfff pt15 pl15 pr15 pb15 fs14 ca8 borderbox w100p"\n' +
                '>'+i.vmodel+'</p>';
              break ;
            case 'img' :
              result += '<img src="'+i.vmodel+'" alt="" class="w100p" mode="widthFix">';
              break ;
            case 'banner' :
              result += '';
              break ;
            case 'split' :
              result += '<div class="pt15 pb15 bgfff">\n' +
                '    <span class="w100p h1 bgf5f6 disblock"></span>\n' +
                '</div>';
              break ;
          }
        });

        if(this.type == 'prod' || this.type == 'article'){
          wx.setStorageSync('editOperator' , result ) ;
          wx.showLoading();
          setTimeout(function () {
            wx.hideLoading();
            wx.navigateBack();
          },600) ;
        }else {
          // company , webProd
          wx.showLoading() ;
          let params = {} ;

          params[this.type] = result ;
          params.websiteId = this.websiteId ;
          WXAJAX.POST(params , '', '/company/addWebsiteInfo').then((data) => {

            wx.hideLoading();
            if(data){
              wx.showToast({
                title: '成功！',
                icon: 'success'
              });
              setTimeout(function () {
                wx.navigateBack() ;
              },500)
            }

          }).catch((err) => {
            wx.hideLoading();
            console.log(err)
          });
        }
      },
      swiperChange(that , e , index1) {
        let _cur = e.target.current  //获取当前轮播图片的下标, 可以给当前指示点加样式
        this.$set(this.innerHtmls[index1] , 'cur' , _cur);
      },
      editAdd(type, index) {//添加模块

        let _htmls = {},
          v = this,
          _top = 0,
          _height = 0;
        if (type == 'banner') {
          _htmls = {
            type: type,
            vmodel: [],
            cur:0
          }
        } else {
          _htmls = {
            type: type,
            vmodel: '',
          }
        }
        if (index >= 0) {
          v.innerHtmls.splice(index + 1, 0, _htmls);
        } else {
          v.innerHtmls.push(_htmls);
        }
      },
      edit_tap(type, index) {//模块操作
        console.log(11111111);
        let v = this;
        if (type == 'text' || type == 'img' || type == 'banner' || type == 'split') {
          this.editAdd(type, index)
        } else {
          // up  down del
          wx.showLoading();
          if (type == 'up') {
            if (index == 0) {
              wx.showToast({
                title: '已经在最前面了！',
                duration: 1500,
                icon: 'none'
              });
              return
            }
            let _prev = v.innerHtmls[index - 1];
            v.$set(v.innerHtmls, index - 1, v.innerHtmls[index]);
            v.$set(v.innerHtmls, index, _prev);
            _prev = null;
          } else if (type == 'down') {
            if (index == v.innerHtmls.length - 1) {
              wx.showToast({
                title: '已经在最后面了！',
                duration: 1500,
                icon: 'none'
              });
              return
            }

            let _next = v.innerHtmls[index + 1];

            v.$set(v.innerHtmls, index + 1, v.innerHtmls[index]);
            v.$set(v.innerHtmls, index, _next);

            _next = null;
          } else if (type == 'del') {
            v.innerHtmls.splice(index, 1);
          }

          setTimeout(function () {
            wx.hideLoading();
          }, 300)
        }
      },
      async uploadpic(str, index1 , index2) {

        if(str == 'banner' && this.innerHtmls[index1].vmodel.length >= 5){
          wx.showToast({
            title: '最多选择五张！',
            duration: 1500,
            icon : 'none'
          });
          return
        }

        let path = await util.chooseImage('file');
        if(!(path instanceof Array)) return;
        this.uploadImg(path[0], str ,index1);

      },
      uploadImg(path, str ,index1) {

        let v = this;
        wx.showLoading();

        WXAJAX.UploadImage(path).then((data) => {
          wx.hideLoading();
          data = JSON.parse(data);

          if (data.code == '200') {

            if (str == 'banner') {
              v.innerHtmls[index1].vmodel.push(v.imgBackUrl + data.data);
            }else{
              v.$set(v.innerHtmls[index1], 'vmodel', v.imgBackUrl + data.data);
            }

          } else {
            wx.showToast({
              title: '服务器繁忙',
              duration: 2000,
              icon: 'none'
            })
          }

        }).catch((err) => {
          wx.hideLoading();
          console.log('err -- ', err);
        })

      },
      delBanner(index1,index2){//删除轮播图
        let v = this ;
        wx.showLoading();
        v.innerHtmls[index1].vmodel.splice(index2,1);
        setTimeout(function () {
          wx.hideLoading();
        },300)
      }
    }
  }
</script>

<style>
  scroll-view {
    width: 100%;
    height: 100%;
  }
</style>


























